<template>
	<view>
		<u-popup id="popup-box1" :show="showScanPopup" mode="center" bgColor="transparent" :closeOnClickOverlay="false">
			<template>
				<view class="x-c" style="background-color: rgba(0,0,0,0.3);width: 100%;height: 100%;">
					<view>
						<view class="scanLine"></view>
						<uni-icons fontFamily="CustomFontPlatform" color="#51d0d0"
							:size="150">{{$utils.toUniCode('&#xeac9;')}}</uni-icons>

						<view class="x-c" style="position: fixed;top: 50%;left: 0;opacity: 0;">

							<input type="text" ref="scanIpt" password :focus="scanIpt" class="scan-input"
								inputmode="none" @confirm="addCode" autocomplete="off" @focus="changeFocus"
								@blur="changeBlur" :value="inputText" :auto-blur="false"></input>
						</view>
					</view>
				</view>


			</template>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showScanPopup: true,
				inputText: "",
				scanIpt: true,
				// #ifdef APP-PLUS
				eventChannel: null
				// #endif
			};
		},
		onShow() {
			this.$store.commit('ChangeAndSetStateData', {
				Name1: 'systemConfig.msgConfig.msgBtnIsHide',
				data: true,
			});
		},
		onHide() {
			/* this.$store.commit('ChangeAndSetStateData', {
				Name1: 'systemConfig.msgConfig.msgBtnIsHide',
				data: false,
			}); */
		},
		created() {
			// #ifdef APP-PLUS
			this.eventChannel = this.getOpenerEventChannel();
			// #endif
		},
		beforeDestroy() {
			// #ifdef APP-PLUS
			this.eventChannel.emit("cancel");
			// #endif

			this.$store.commit('ChangeAndSetStateData', {
				Name1: 'systemConfig.msgConfig.msgBtnIsHide',
				data: false,
			});
		},
		methods: {
			addCode(data) {
				let that = this;
				let scanCode = data.target['value'];

				that.hide('success', {
					result: scanCode
				});
			},
			changeFocus() {
				uni.hideKeyboard()
			},
			changeBlur(data) {
				console.log(data);
			},


			closeScanPopup(type = 'cancel') {
				console.log(11111);
				this.hide('cancel');
			},
			hide(type, callback = '') {
				let _this = this;
				setTimeout(() => {

					uni.navigateBack({
						delta: 1,
						success() {
							_this.eventChannel.emit(type, callback);
						}
					})
				}, 400) // 这里时间就是弹窗显示隐藏动画时间
			}
		}
	}
</script>

<style>
	page {
		background: transparent;
	}
</style>
<style lang="scss">
	.inputClass {
		/* opacity: 0; */
		width: 150px;
	}

	.scanLine {
		position: absolute;
		z-index: 2;
		width: 66%;
		height: 2px;
		transform: translateX(25%);
		background-color: #51d0d0;
		animation: scanLineMove 2s infinite;
	}

	.newClass {
		color: red;
	}

	@keyframes scanLineMove {
		from {
			top: 30px;
		}

		to {
			top: 120px;
		}
	}

	.IptStyle {
		opacity: 1;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>